<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx语法规1</title>
      <!-- 1. 引入react核心库 -->
      <script src="../node_modules/react/umd/react.development.js"></script>
      <!-- 2. 引入react-dom 用于支持react操作dom -->
      <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
      <!-- 引入jsx -->
      <script src="../node_modules/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>

  <script type="text/babel">

      /*
      * jsx语法规则
      * 1.定义虚拟DOM时,不要写引号。
      * 2.标签中混入JS表达式时要用{}
      * 3. 样式的类名指定不要用class,要用className
      * 4. 只允许有一个根节点（3种解决办法[用一个div标签包裹/<></>/React.Fragment标签]）
      *   4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
      *   4.2 推荐用<></>
      * 5. 内联样式,要用style={{key:value}}的形式去写。
      * 6. 标签必须闭合
      * 7. 标签首字母
      *   7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
      */

      // 3. 创建React元素/创建虚拟dom-使用JSX语法

        let cont = '200'
        let item = <>
                      <div className='item'>
                        <h2 className='title' style={{color:'red'}}>你好</h2>
                        <p>多少：{cont}</p>
                      </div>
                   </>
        let root = ReactDOM.createRoot(document.getElementById('root'))
        root.render(item)

  </script>

</html>